<template>
  <van-pull-refresh v-model="refLoading" @refresh="onRefresh">
    <div class="container" style="padding-top: 15px">
      <!-- <div class="abox">
      <van-icon class="a1" name="vip-card-o" />
      <span class="a3">Lv4</span>
      <span class="a2">0x81E5...Aa7e29</span>
      <span class="a4">
        <img src="@/assets/images/usdt.png" alt="">
        <span class="a41">1024.35</span>
        <span class="a42">USDT</span>
      </span>
    </div> -->
      <div class="dbox">
        <div class="d1">
          <img src="@/assets/images/usdt.png" alt=""/>
          {{ $t("all.zongzichan") }}
        </div>
        <div class="d2">
          <span class="d21">{{ infos.balance }}</span>
          <span class="d22">USDT</span>
        </div>
        <!-- <div class="d3">
          <van-icon
            name="envelop-o"
            color="#fff"
            size="16"
            style="margin-right: 4px"
          />
          <span class="d21">{{ infos.email }}</span>
          <van-icon
            @click="emailShow = true"
            name="edit"
            color="#fff"
            size="16"
            style="margin-left: 4px"
          />
        </div> -->
        <div class="rbox">
          <img src="@/assets/images/vip.png" alt=""/>
          <span class="a3">{{ $t("all.renwu") }}Lv{{ infos.level }}</span>
        </div>
        <div class="rbox rbox2">
          <img src="@/assets/images/vip.png" alt=""/>
          <span class="a3">{{ $t("all.zhiya") }}Lv{{ infos.miningLevel }}</span>
        </div>
      </div>
      <div class="bbox">
        <div class="btn1" @click="toRecharge">{{ $t("all.chongzhi") }}</div>
        <div class="btn1" @click="toWithdrawal">{{ $t("all.tixian") }}</div>
        <div class="btn1" @click="toPersonalCenter">
          {{ $t("all.personalCenter") }}
        </div>
      </div>
      <div class="cbox">
        <van-tabs
            v-model:active="tabIndex"
            sticky
            shrink
            title-inactive-color="#878B97"
            title-active-color="#252424"
            color="#252424"
            line-width="20px"
            background="#fff"
        >
          <van-tab :title="$t('all.chongzhijilu')">
            <van-dropdown-menu>
              <van-dropdown-item v-model="rechargeListLegalTenderCode" @change="resetList"
                                 :options="legalTenderOption"/>
            </van-dropdown-menu>

            <!--USDT充值记录 -->
            <van-list
                v-if="rechargeListLegalTenderCode === 'USDT'"
                v-model:loading="loading"
                :finished="finished"
                :finished-text="$t('all.meiyougengduole')"
                @load="getTabList1"
                :immediate-check="false"
                :loading-text="$t('all.jiazaizhong')"
            >
              <div class="nbox" v-for="item in rewardList" :key="item.id">
                <div class="rli">
                  <div class="rli1">{{ $t("all.gonglian") }}</div>
                  <div class="rli2">{{ item.publicChain }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.chongzhileixing") }}</div>
                  <div class="rli2">{{ handleTypeLanguage(item.type) }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.shuliang") }}</div>
                  <div class="rli2">{{ item.quantity }} USDT</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.zhuangtai") }}</div>
                  <div class="rli2">{{ handleTypeLanguage(item.state) }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.jiaoyihaxi") }}</div>
                  <div class="rli2 rli3">
                    {{ item.transactionHash }}
                    <img
                        v-show="item.transactionHash"
                        @click="copyDomText(item.transactionHash)"
                        src="@/assets/images/fuzhi.png"
                        alt=""
                    />
                  </div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.shijian") }}</div>
                  <div class="rli2">{{ item.createTime }}</div>
                </div>
              </div>
            </van-list>

            <!-- 法币充值记录 -->
            <van-list
                v-else
                v-model:loading="loading"
                :finished="finished"
                :finished-text="$t('all.meiyougengduole')"
                @load="getTabList1"
                :immediate-check="false"
                :loading-text="$t('all.jiazaizhong')"
            >
              <div class="nbox" v-for="item in legalTenderRechargeList" :key="item.id">
                <div class="rli">
                  <div class="rli1">ID</div>
                  <div class="rli2">{{ item.id }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.rechargeAmount") }}</div>
                  <div class="rli2">{{ `${item.amount} ${rechargeListLegalTenderCode}` }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.rechargeChannel") }}</div>
                  <div class="rli2">{{ legalTenderRechargeLanguage(globalProperties, item.businessName) }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.legalTenderActualAmount") }}</div>
                  <div class="rli2">{{
                      `${item.actualAmount ? item.actualAmount : '-'} ${rechargeListLegalTenderCode}`
                    }}
                  </div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.exchangeRate") }}</div>
                  <div class="rli2">{{ `${item.actualRate ? item.actualRate : '-'}/USDT` }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.legalTenderActualUSDT") }}</div>
                  <div class="rli2">{{ `${item.actualUsdt ? item.actualUsdt : '-'} USDT` }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.zhuangtai") }}</div>
                  <div class="rli2">{{ legalTenderRechargeLanguage(globalProperties, item.status) }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.shijian") }}</div>
                  <div class="rli2">{{ item.createTime }}</div>
                </div>
              </div>
            </van-list>
          </van-tab>
          <van-tab :title="$t('all.jiangliliebiao')">
            <van-list
                v-model:loading="loading"
                :finished="finished"
                :finished-text="$t('all.meiyougengduole')"
                @load="getTabList2"
                :immediate-check="false"
                :loading-text="$t('all.jiazaizhong')"
            >
              <div class="nbox" v-for="item in jobList" :key="item.id">
                <div class="rli">
                  <div class="rli1">{{ $t("all.shijian") }}</div>
                  <div class="rli2">{{ item.createTime }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.leixing") }}</div>
                  <div class="rli2">{{ handleTypeLanguage(item.type) }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.jiangli") }}</div>
                  <div class="rli2">{{ item.quantity }} USDT</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.zhuangtai") }}</div>
                  <div class="rli2">{{ handleTypeLanguage(item.state) }}</div>
                </div>
              </div>
            </van-list>
          </van-tab>
          <van-tab :title="$t('all.yaoqingfenhong')">
            <van-list
                v-model:loading="loading"
                :finished="finished"
                :finished-text="$t('all.meiyougengduole')"
                @load="getTabList3"
                :immediate-check="false"
                :loading-text="$t('all.jiazaizhong')"
            >
              <div class="nbox" v-for="item in profitList" :key="item.id">
                <div class="rli">
                  <div class="rli1">{{ $t("all.shijian") }}</div>
                  <div class="rli2">{{ item.createTime }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.leixing") }}</div>
                  <div class="rli2">{{ handleTypeLanguage(item.type) }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.laiyuanyonghu") }}</div>
                  <div class="rli2">{{ item.fromUser }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.jiangli") }}</div>
                  <div class="rli2">{{ item.quantity }} USDT</div>
                </div>
              </div>
            </van-list>
          </van-tab>
          <van-tab :title="$t('all.tixianjilu')">
            <van-dropdown-menu>
              <van-dropdown-item v-model="rechargeListLegalTenderCode" @change="resetList"
                                 :options="legalTenderOption"/>
            </van-dropdown-menu>

            <!-- USDT提现记录 -->
            <van-list
                v-if="rechargeListLegalTenderCode === 'USDT'"
                v-model:loading="loading"
                :finished="finished"
                :finished-text="$t('all.meiyougengduole')"
                @load="getTabList4"
                :immediate-check="false"
                :loading-text="$t('all.jiazaizhong')"
            >
              <div class="nbox" v-for="item in withdrawalList" :key="item.id">
                <div class="rli">
                  <div class="rli1">{{ $t("all.shijian") }}</div>
                  <div class="rli2">{{ item.createTime }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.gonglian") }}</div>
                  <div class="rli2">{{ item.publicChain }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.tixiandizhi") }}</div>
                  <div class="rli2">{{ item.arrivalAddress }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.tixianshuliang") }}</div>
                  <div class="rli2">{{ item.quantity }} USDT</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.zhuangtai") }}</div>
                  <div class="rli2">{{ handleTypeLanguage(item.state) }}</div>
                </div>
              </div>
            </van-list>

            <!-- 法币提现记录 -->
            <van-list
                v-else
                v-model:loading="loading"
                :finished="finished"
                :finished-text="$t('all.meiyougengduole')"
                @load="getTabList4"
                :immediate-check="false"
                :loading-text="$t('all.jiazaizhong')"
            >
              <div class="nbox" v-for="item in legalTenderWithdrawalList" :key="item.id">
                <div class="rli">
                  <div class="rli1">ID</div>
                  <div class="rli2">{{ item.id }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.withdrawalChannel") }}</div>
                  <div class="rli2">{{ legalTenderRechargeLanguage(globalProperties, item.businessName) }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.bank") }}</div>
                  <div class="rli2">{{ item.bankName }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.account") }}</div>
                  <div class="rli2">{{ item.account }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.accountName") }}</div>
                  <div class="rli2">{{ item.accountName }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.withdrawalAmount") }}</div>
                  <div class="rli2">{{ `${item.amount} ${rechargeListLegalTenderCode}` }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.legalTenderActualAmount") }}</div>
                  <div class="rli2">{{ `${item.receiptAmount ? item.receiptAmount : '-'} ${rechargeListLegalTenderCode}` }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.legalTenderActualUSDT") }}</div>
                  <div class="rli2">{{ `${item.actualUsdt ? item.actualUsdt : '-'} USDT` }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.shouxufei") }}</div>
                  <div class="rli2">{{ `${item.fee ? item.fee : '-'} USDT` }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.exchangeRate") }}</div>
                  <div class="rli2">{{ `${item.rate ? item.rate : '-'}/USDT` }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.zhuangtai") }}</div>
                  <div class="rli2">{{ legalTenderRechargeLanguage(globalProperties, item.status) }}</div>
                </div>
                <div class="rli">
                  <div class="rli1">{{ $t("all.shijian") }}</div>
                  <div class="rli2">{{ item.createTime }}</div>
                </div>
              </div>
            </van-list>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <!-- <van-dialog
      v-model:show="emailShow"
      :title="$t('all.xiugaiyouxiang')"
      closeOnClickOverlay
      :showConfirmButton="false"
      :confirmButtonText="$t('all.queren')"
    >
      <div style="padding: 10px 0">
        <van-cell-group inset>
          <div class="ili-2" style="position: relative">
            <van-field
              v-model="emailForm.code"
              :label="$t('all.yanzhengma')"
              :placeholder="$t('all.qingshuruyanzhengma')"
              label-width="84"
            />
            <span class="fasong" @click="sendEmailCode">{{ emailText }}</span>
          </div>
          <van-field
            v-model="emailForm.email"
            :label="$t('all.xinyouxiang')"
            :placeholder="$t('all.qingshuruyouxiang')"
            label-width="84"
          />
        </van-cell-group>
        <div class="zbtn" @click="handleEditEmail">{{ $t("all.tijiao") }}</div>
      </div>
    </van-dialog> -->
  </van-pull-refresh>
</template>

<script setup lang="ts">
import {computed, getCurrentInstance, onMounted, reactive, ref, watch} from "vue";
import {useRouter} from "vue-router";
import {checkLogin, copyDomText, isEmail} from "@/utils/common";
import {useStore} from "@/store";
import {Toast} from "vant";
import http from "@/utils/http";
import {legalTenderRechargeLanguage} from "@/utils/legalTenderRechargeUtils.js";

const {
  appContext: {
    config: {globalProperties},
  },
} = getCurrentInstance();

const store = useStore();
const router = useRouter();
const tabIndex = ref(0);
const loading = ref(false);
const finished = ref(false);
const refLoading = ref(false);
const pageIndex = ref(1);
const pageSize = ref(10);
const rewardList = ref<any[]>([]);
const legalTenderRechargeList = ref<any[]>([]);
const legalTenderWithdrawalList = ref<any[]>([]);
const jobList = ref<any[]>([]);
const withdrawalList = ref<any[]>([]);
const profitList = ref<any[]>([]);
const emailShow = ref(false);
const emailText = ref<number | string>(globalProperties.$t("all.fasong"));

// 法币相关
const rechargeListLegalTenderCode = ref("USDT")
const legalTenderUSDT = {
  text: 'USDT',
  value: 'USDT'
}
let legalTenderOption: any[] = []

const emailForm = reactive({
  email: "",
  code: "",
});

const sendEmailCode = async () => {
  if (emailText.value === globalProperties.$t("all.fasong")) {
    emailText.value = 60;
    const timer = setInterval(() => {
      if (emailText.value <= 0) {
        emailText.value = globalProperties.$t("all.fasong");
        clearInterval(timer);
        return;
      }
      (emailText.value as number) -= 1;
    }, 1000);
    const ret: any = await http.post("email/send", {
      type: 1,
    });
    if (ret.code === 200) {
      Toast(ret.msg || ret.data);
    }
  }
};
const onRefresh = () => {
  setTimeout(() => {
    Toast(globalProperties.$t("all.shuaxinchenggong"));
    resetList();
    store.dispatch("users/getUserInfo");
    refLoading.value = false;
  }, 1000);
};

onMounted(() => {
  rechargeListLegalTenderCode.value = 'USDT'
  selectLegalTenderOption()
})

// 查询法币列表
const selectLegalTenderOption = () => {
  // 第一个永远使用USDT
  legalTenderOption = [legalTenderUSDT]
  http.get("legal-tender/app/list").then((res: any) => {
    if (res.code === 200) {
      for (let i = 0; i < res.rows.length; i++) {
        let item = res.rows[i];
        legalTenderOption.push({text: item.code, value: item.code})
      }
    }
  })
}

const resetList = () => {
  pageIndex.value = 0;
  loading.value = true
  getList(tabIndex.value);
};
const getTabList1 = () => {
  pageIndex.value += 1

  // 查询USDT充值记录
  if (rechargeListLegalTenderCode.value === 'USDT') {
    http.get("record", {
      pageNum: pageIndex.value, //页数
      pageSize: pageSize.value, //每页条数
    }).then((res: any) => {
      if (res.code === 200) {
        if (pageIndex.value === 1) {
          rewardList.value = res.rows;
        } else {
          rewardList.value = rewardList.value.concat(res.rows);
        }

        finished.value = rewardList.value.length >= res.total;
        loading.value = false;
      }
    });

  } else {
    http.get("qg-pay/recharge-detail/app/page", {
      pageNum: pageIndex.value, //页数
      pageSize: pageSize.value, //每页条数
      legalTenderCode: rechargeListLegalTenderCode.value
    }).then((res: any) => {
      if (res.code === 200) {
        if (pageIndex.value === 1) {
          legalTenderRechargeList.value = res.rows;
        } else {
          legalTenderRechargeList.value = legalTenderRechargeList.value.concat(res.rows);
        }

        finished.value = legalTenderRechargeList.value.length >= res.total;
        loading.value = false;
      }
    });
  }
};
const getTabList2 = () => {
  pageIndex.value += 1

  http.get("record/reward", {
    pageNum: pageIndex.value, //页数
    pageSize: pageSize.value, //每页条数
  })
      .then((res: any) => {
        if (res.code === 200) {
          if (pageIndex.value === 1) {
            jobList.value = res.rows;
          } else {
            jobList.value = jobList.value.concat(res.rows);
          }

          finished.value = jobList.value.length >= res.total;
          loading.value = false;
        }
      });
};
const getTabList3 = () => {
  pageIndex.value += 1
  http.get("profit/record", {
    pageNum: pageIndex.value, //页数
    pageSize: pageSize.value, //每页条数
  })
      .then((res: any) => {
        if (res.code === 200) {
          if (pageIndex.value === 1) {
            profitList.value = res.rows;
          } else {
            profitList.value = profitList.value.concat(res.rows);
          }

          finished.value = profitList.value.length >= res.total;
          loading.value = false;
        }
      });
};
const getTabList4 = () => {
 pageIndex.value += 1
  // 查询USDT提现记录
  if (rechargeListLegalTenderCode.value === 'USDT') {
    http.get("withdrawal/list", {
      pageNum: pageIndex.value, //页数
      pageSize: pageSize.value, //每页条数
    }).then((res: any) => {
      if (res.code === 200) {
        if (pageIndex.value === 1) {
          withdrawalList.value = res.rows;
        } else {
          withdrawalList.value = withdrawalList.value.concat(res.rows);
        }

        finished.value = withdrawalList.value.length >= res.total;
        loading.value = false;
      }
    });

  } else {
    // 查询法币提现记录
    http.get("qg-pay/withdrawal-detail/app/page", {
      pageNum: pageIndex.value, //页数
      pageSize: pageSize.value, //每页条数
      legalTenderCode: rechargeListLegalTenderCode.value
    }).then((res: any) => {
      if (res.code === 200) {
        if (pageIndex.value === 1) {
          legalTenderWithdrawalList.value = res.rows;
        } else {
          legalTenderWithdrawalList.value = legalTenderWithdrawalList.value.concat(res.rows);
        }

        finished.value = legalTenderWithdrawalList.value.length >= res.total;
        loading.value = false;
      }
    });
  }
};
const getList = (index: number) => {
  switch (index) {
    case 0:
      getTabList1();
      break;
    case 1:
      getTabList2();
      break;
    case 2:
      getTabList3();
      break;
    case 3:
      getTabList4();
      break;
  }
};
const infos = computed(() => store.state.users.infos);

watch(
    tabIndex,
    (newVal, oldVal) => {
      pageIndex.value = 0;
      resetList();
      // getList(newVal);
    },
    {
      immediate: true,
    }
);

const handleEditEmail = async () => {
  if (!isEmail(emailForm.email)) {
    Toast(globalProperties.$t("all.youxiangtip"));
    return;
  }
  if (!emailForm.code) {
    Toast(globalProperties.$t("all.qingshuruyanzhengma"));
    return;
  }
  http
      .post("user/change/email", {
        email: emailForm.email,
        verificationCode: emailForm.code,
      })
      .then((res: any) => {
        if (res.code === 200) {
          Toast(globalProperties.$t("all.chenggong"));
          emailShow.value = false;
          store.dispatch("users/getUserInfo");
        }
      });
};

const handleTypeLanguage = (str: string) => {
  switch (str) {
    case "审核中":
      return globalProperties.$t("all.shenhezhong");
    case "提现中":
      return globalProperties.$t("all.tixianzhong");
    case "充值中":
      return globalProperties.$t("all.chongzhizhong");
    case "已成功":
      return globalProperties.$t("all.yichenggong");
    case "已完成":
      return globalProperties.$t("all.yiwancheng");
    case "已拒绝":
      return globalProperties.$t("all.yijujue");
    case "已失败":
      return globalProperties.$t("all.yishibai");
    case "链上充值":
      return globalProperties.$t("all.lianshangchongzhi");
    case "人工充值":
      return globalProperties.$t("all.rengongchongzhi");
    case "质押收益":
      return globalProperties.$t("all.zhiyajiangli");
    case "任务收益":
      return globalProperties.$t("all.renwujiangli");
    case "充值分红":
      return globalProperties.$t("all.chongzhifenhong");
    case "挖矿分红":
      return globalProperties.$t("all.wakuangfenhong");
    case "分享奖励":
      return globalProperties.$t("all.fenxiangjiangli");
  }
};

const toRecharge = () => {
  console.log(infos.value.token)
  if (!infos.value.token) {
    router.push('/home')
    return
  }

  router.push("/capital/recharge");
};
const toWithdrawal = () => {
  if (!infos.value.token) {
    router.push('/home')
    return
  }

  router.push("/capital/withdrawal");
};
const toPersonalCenter = () => {
  if (!infos.value.token) {
    router.push('/home')
    return
  }

  router.push("/capital/personalCenter");
}
</script>

<style lang="scss" scoped>
.dbox {
  margin: 0 15px 15px 15px;
  border-radius: 4px;
  // background-image: linear-gradient(to bottom right, #36b4ea, #0996d3);
  background-image: linear-gradient(to bottom right, #36b4ea, #0996d3);
  height: 120px;
  position: relative;

  .rbox {
    // width: 100px;
    padding-right: 10px;
    height: 30px;
    border-radius: 200px 0 0 200px;
    background: #000;
    position: absolute;
    right: 0;
    top: 28px;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    font-style: italic;
    color: #eacc36;

    img {
      width: 20px;
      margin-right: 2px;
      margin-left: 10px;
    }

    &.rbox2 {
      top: 66px !important;
    }
  }

  .d3 {
    font-size: 12px;
    // font-weight: 600;
    color: #fff;
    position: absolute;
    bottom: 16px;
    left: 24px;
    display: flex;
    align-items: center;
  }

  .d1 {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    position: absolute;
    top: 30px;
    left: 24px;
    display: flex;
    align-items: center;

    img {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      margin-right: 4px;
      border: 1px solid #fff;
    }
  }

  .d2 {
    color: #fff;
    position: absolute;
    top: 66px;
    left: 24px;
    display: flex;
    align-items: flex-end;

    .d21 {
      font-size: 28px;
      font-weight: 600;
      margin-right: 4px;
    }

    .d22 {
      font-size: 12px;
    }
  }
}

.cbox {
  margin: 15px;
  border-radius: 4px;
  background: #fff;
  padding: 10px;
  min-height: 54vh;
  box-shadow: 0 10px 20px 0 rgb(10 20 111 / 5%),
  1px 1px 1px 0 hsl(0deg 0% 100% / 30%);
}

.bbox {
  margin: 15px;
  border-radius: 4px;
  background: #fff;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px 0 rgb(10 20 111 / 5%),
  1px 1px 1px 0 hsl(0deg 0% 100% / 30%);

  .btn1 {
    flex: 1;
    height: 40px;
    background-image: linear-gradient(to bottom right, #36b4ea, #0996d3);
    border-radius: 4px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;

    &:last-child {
      background-image: linear-gradient(to bottom right, #36b4ea, #0996d3);
      //background: #ecc714;
      color: #fff;
      margin-right: 0;
    }
  }
}

.nbox {
  padding: 10px 16px;
  border-bottom: 1px solid #f1f1f1;

  .rli {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 34px;

    .rli1 {
      color: #878787;
      font-size: 13px;
    }

    .rli2 {
      color: #333;
      font-size: 13px;
      text-align: right;
      max-width: 200px;
      word-break: break-all;

      img {
        position: absolute;
        width: 14px;
        right: 0px;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .rli3 {
      width: 140px;
      padding-right: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      position: relative;
    }
  }
}

.zbtn {
  width: 68vw;
  height: 36px;
  background-image: linear-gradient(to bottom right, #36b4ea, #0996d3);
  text-align: center;
  margin: 10px auto;
  line-height: 36px;
  color: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fasong {
  font-size: 13px;
  color: #36b4ea;
  position: absolute;
  right: 16px;
  top: 50%;
  z-index: 1001;
  transform: translateY(-50%);
}
</style>
